<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="sport.js"></script>
</head>

<body>
    <div class="banner">
        <ul class="imgBox clearFix">

            <li style="background-color: red">1</li>
            <li style="background-color: orange">2</li>
            <li style="background-color: skyblue">3</li>
            <li style="background-color: pink">4</li>
            <li style="background-color: purple">5</li>
            <li style="background-color: yellow">6</li>
            <li style="background-color: springgreen">7</li>

        </ul>

        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a href="javascript:;" class="left">
                < </a>
                    <a href="javascript:;" class="right"> > </a>
        </div>
    </div>
</body>

</html>
<script src="common.js"></script>
<script>

    const bannerDom = document.querySelector('.banner');
    const imgBoxDom = document.querySelector('.imgBox');
    const pointBoxDom = document.querySelector('.pointBox');
    const leftRightTabsDom = document.querySelector('.leftRightTabs');
    const bannerWidth = bannerDom.clientWidth;
    let index = 1;
    let timer;
    let flag = false;
    createPoint();
    createLiTag();
    autoPlay();
    bannerDom.addEventListener('mouseover', function () {
        clearInterval(timer);
    })
    bannerDom.addEventListener('mouseout', function () {
        autoPlay();
    })
    leftRightTabsDom.addEventListener('click', function (event) {
        if (flag) {
            return;
        }
        flag = true;
        if (event.target.className == 'left') {

            index--;
            animate(imgBoxDom, { left: - index * bannerWidth }, playEnd)
        } else if (event.target.className == 'right') {

            index++;
            animate(imgBoxDom, { left: - index * bannerWidth }, playEnd)
        }
    })
    function autoPlay() {
        timer = setInterval(function () {
            index++;
            animate(imgBoxDom, { left: -index * bannerWidth }, playEnd)
        }, 3000)
    }
    pointBoxDom.addEventListener('click', function (event) {
        if (event.target.nodeName == 'LI') {
            index = event.target.getAttribute('data-index') - 0 + 1;
            animate(imgBoxDom, { left: -index * bannerWidth }, playEnd)
        }
    })
    function playEnd() {
        if (index >= imgBoxDom.children.length - 1) {
            index = 1;
        }
        if (index <= 0) {
            index = imgBoxDom.children.length - 2;
        }
        imgBoxDom.style.left = -index * bannerWidth + 'px';
        for (let i = 0; i < pointBoxDom.children.length; i++) {
            pointBoxDom.children[i].className = '';
        }
        pointBoxDom.children[index - 1].className = 'active';
        flag = false;
    }
    function createLiTag() {
        let firstLiClone = imgBoxDom.firstElementChild.cloneNode(true);
        let lastLiClone = imgBoxDom.lastElementChild.cloneNode(true);
        imgBoxDom.appendChild(firstLiClone);
        imgBoxDom.insertBefore(lastLiClone, imgBoxDom.firstElementChild);
        imgBoxDom.style.width = bannerWidth * imgBoxDom.children.length + 'px';
        imgBoxDom.style.left = -bannerWidth + 'px';
    }
    function createPoint() {
        for (let i = 0; i < imgBoxDom.children.length; i++) {
            let liDom = document.createElement('li');
            i == 0 && (liDom.className = 'active');
            liDom.setAttribute('data-index', i);
            pointBoxDom.appendChild(liDom);
        }
    }
</script>